/*
* from github https://github.com/sanyuelanv/react-circle-progress
* */
import React, {Component} from "react"

class Index extends Component {
    static defaultProps = {
        current: 0,        //进度条当前进度（范围0-1）
    }

    constructor(props) {
        super(props)
        this.size = this.props.size || 60       //整个svg的宽高，因为是圆形所以只要一个值
        this.sw = this.props.strokeWidth || 6      //进度条的宽度
        this.r = this.props.radius || 27        //进度条所在圆形的半径
        this.pbc = this.props.progressColor || "#249fff"        //进度条激活的颜色
        this.bbc = this.props.bottomColor || "#cccccc"      //进度条未激活的颜色
        this.pbf = this.props.progressFillColor || "transparent"        //进度条所在圆形激活的颜色
        this.bbf = this.props.bottomFillColor || "transparent"      //进度条所在圆形未激活的颜色
        this.time = this.props.time || 0.5      //进度条发生变化动画用时
        this.allLength = Math.PI * 2 * this.r
        this.startPoint = this.props.startPoint - 90 || -90     //进度条起始位置
        this.gradientDirection = this.props.gradientDirection || "vertical"     //进度条渐变方向[vertical,horizontal]
        this.showText = this.props.showText === false ? this.props.showText : true       //是否显示文字
        this.textStyle = this.props.textStyle || {size: 12, color: "#555", type: 0} //文字样式(目前只能上下左右居中),type参数是文字显示形式。0:带百分比符号的整型数，1:不带百分比的两位小数，2：不带百分比的整型数
        this.linecap = this.props.linecap || "square"       //进度条两端的样式(round/square)
    }

    _renderLinearGradient() {
        let {gradient,} = this.props
        if (!gradient) return
        let arr = gradient.map((item, index) => {
            let {offset, color, opacity} = item
            return (<stop offset={offset + "%"} key={index} style={{stopColor: color, stopOpacity: opacity}}/>)
        })
        return (
            <defs>
                <linearGradient
                    id="sanyuelanvGradient"
                    x1="0%" y1="0%"
                    x2={this.gradientDirection === "horizontal" ? "0%" : "100%"}
                    y2={this.gradientDirection === "vertical" ? "0%" : "100%"}
                >
                    {arr}
                </linearGradient>
            </defs>
        )
    }

    _renderText(current) {
        if (!this.showText) return
        let {color, size, type} = this.textStyle
        let res = current
        if (type === 0) {
            res = parseInt(current * 100,10) + "%"
        } else if (type === 1) {
            res = current
        } else if (type === 2) {
            res = parseInt(current * 100,10)
        }
        return (
            <text x="50%" y="50%" dy={size / 2} textAnchor="middle"
                  style={{fontSize: size + "px", fill: color}}>{res}</text>
        )
    }

    render() {
        let {current, gradient} = this.props
        current = current.toFixed(2)
        current = current >= 1 ? 1 : current
        return (
            <svg viewBox={"0 0 " + this.size + " " + this.size} width={this.size} height={this.size} version="1.1">
                {this._renderLinearGradient()}
                <circle r={this.r} cx={this.size / 2} cy={this.size / 2}
                        style={{stroke: this.bbc, fill: this.bbf, strokeWidth: this.sw}}/>
                <circle r={this.r} cx={this.size / 2} cy={this.size / 2}
                        transform={"rotate(" + this.startPoint + "," + this.size / 2 + ", " + this.size / 2 + ")"}
                        style={{
                            transition: "all " + this.time + "s linear",
                            WebkitTransition: "all " + this.time + "s linear",
                            strokeDashoffset: this.allLength * (1 - current),
                            strokeDasharray: this.allLength,
                            strokeLinecap: this.linecap,
                            stroke: gradient ? "url('#sanyuelanvGradient')" : this.pbc,
                            fill: this.pbf,
                            strokeWidth: this.sw,
                        }}
                >
                </circle>
                {this._renderText(current)}
            </svg>
        )
    }
}

export default Index
